<template>
  <div>
    <van-nav-bar fixed @click-left="onClickLeft" title="图片详情">
      <template #left>
        <van-icon name="arrow-left" color="#fff">返回</van-icon>
      </template>
    </van-nav-bar>
    <van-panel v-for="item in articlelist" :key="item.id" :title="item.title" :desc="item.add_time | dateFormat">
      <!-- 宫格 -->
      <van-grid :column-num="3">
        <van-grid-item v-for="item in imglist" :key="item.id">
          <van-image :src="item.src" lazy-load />
          <!-- 图片预览 -->
        </van-grid-item>
      </van-grid>
      <p v-html="item.content">{{ item.content }}</p>
    </van-panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 所有的文章详情数组
      articlelist: [],
      // 所有的缩略图数组
      imglist: [],
      show: false,
      preImg: []
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    // 返回上一级
    onClickLeft() {
      this.$router.go(-1);
    },
    // 文章详情
    async getDetail() {
      const res = await this.$http.get('/api/getimageInfo/' + this.$route.params.detailid);
      // 赋值
      this.articlelist = res.data.message;
      // console.log(res);
      this.getImages();
    },
    // 获取图片数据
    async getImages() {
      const res = await this.$http.get('/api/getthumimages/' + this.$route.params.detailid);
      this.imglist = res.data.message;
    }
    // preview(event) {
    //   console.log(event.target.src);

    //   this.preImg = event.target.src;
    //   this.show = true;
    //   this.$ImagePreview(this.preImg);
    // }
  }
};
</script>

<style lang="less" scoped>
.van-panel {
  margin-top: 40px;
}
</style>
